<template>
    <div class="markdowm">
      <textarea v-model="val" id="editor"></textarea>
    </div>
</template>

<script>
// import highlightJs from 'highlight.js'
import marked from 'common/utils/marked.js'
import SimpleMDE from 'simplemde'
import 'simplemde/dist/simplemde.min.css'
export default {
  props: ['value'],
  data() {
    return {
      val: this.value
    }
  },
  mounted: function() {
    this.simplemde = new SimpleMDE({
      autoDownloadFontAwesome: false,
      element: document.getElementById('editor'),
      spellChecker: false,
      previewRender: function(plainText) {
        return marked(plainText) // Returns HTML from a custom parser
      }
    })
    this.simplemde.codemirror.on('change', () => {
      // const value = this.simplemde.value()
      //   // 如果文章内容相同就不保存了
      //   if (this.currentArticle.content === value) {
      //     return
      //   }
      //   // 如果文章已经保存
      //   if (this.currentArticle.save) {
      //     // 改变文章状态 => 未保存
      //     this.$store.dispatch('changeArticle')
      //   }
      //   // 如果不是新建的文章，则保存，这是自动保存，如果不要自动保存可以注释
      //   if (this.currentArticle.id !== -1) {
      //     this.saveArticle({
      //       content: value
      //     })
      //   }
      this.$emit('sendMarkdown', this.simplemde.value())
    })
  },
  destroyed() {
    this.simplemde = null
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.markdowm {
  .CodeMirror-fullscreen,.editor-toolbar {
      z-index: 9999;
  }
}
</style>
